ㄧ.Modal:對話框的選項

<div class="component" id="demo">
  <div class="modal fade show" id="modal-demo" data-backdrop="false">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">Modal</h5>
          <button class="close" data-dismiss="modal">×</button>
        </div>
        <div class="modal-body">
          <p>hello~</p>
        </div>
        <div class="modal-footer">
          <button class="btn btn-primary">確認</button>
          <button class="btn btn-secondary">取消</button>
        </div>
      </div>
    </div>
  </div>
  <button class="btn btn-danger" data-toggle="modal" data-target="#modal-demo">刪除</button>
</div>



.demo.component{
  padding: 50px;
}

重點：

1. data-backdrop="false"為取消半透明暗色背景
2. 2.在console使用$('#modal-demo').modal('show');或$('#modal-demo').modal('hide');
3. 也可用$('#modal-demo').modal('hide');

codepen
參考：bootstrap4